import { Upload, Tabs, Button, message as antdMessage, UploadFile } from "antd";
import React, { useState } from "react";

const App: React.FC = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const beforeUpload = (file: File) => {
    if (!file) return false;
    if (!file.type.includes("image")) {
      antdMessage.error("只可以上传图片");
      return false;
    }
    if (!file.type.includes("png")) {
      antdMessage.error("只可以上传PNG图片");
      return false;
    }
    if (file.size > 400 * 1024) {
      antdMessage.error("图片不可以超过400KB");
      return false;
    }
    return true;
  };

  return (
    <>
      <Tabs activeKey="3">
        <Tabs.TabPane tab="图片上传" key="1">
          1
        </Tabs.TabPane>
        <Tabs.TabPane tab="文件上传" key="2">
          2
        </Tabs.TabPane>
        <Tabs.TabPane tab="PNG图片上传" key="3">
          <Upload
            name="file"
            beforeUpload={(file: File) => beforeUpload(file)}
            action="/api/upload"
            fileList={fileList}
            listType="picture"
            showUploadList={{
              showDownloadIcon: true,
              showRemoveIcon: false,
            }}
            onChange={(e) => {
              if(e.file.response) {
                e.fileList[e.fileList.length -1].url = e.file.response.data.url
              }
              setFileList([...e.fileList])
            }}
          >
            <Button>上传PNG图片</Button>

          </Upload>
          { fileList.length === 0 && <div>暂无上传的数据</div> }
        </Tabs.TabPane>
      </Tabs>
    
    </>
  );
};

export default App;
